<template>
    <div>
        
        <el-container>
            <!-- 侧边栏区域 -->
            <el-aside :width="this.$store.state.isCollapse ? '64px':'200px'">
                <sidebar @sendIsCollapse="hideAside"></sidebar>
            </el-aside>
            <!-- 右边区域 -->
            <el-container>
                <!-- 顶部区域 -->
                <el-header height="8vh">
                    <myhead :title="setTitle"></myhead>
                </el-header>
                <!-- 内容区域 -->
                <el-main>
                    <transition name="fade" mode="out-in">
                        <router-view class="main-view"/>
                    </transition>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import myhead from "@/components/myhead";
    import sidebar from '@/components/sidebar'

    export default {
        data() {
            return {
                //这里暂时先传值侧边栏标题  后续想修改在这里
                arrTitle: [
                    {title: "LOGO", isTrue: false, url: "0"},
                    {title: "导航一", isTrue: false, url: "1"},
                    {title: "导航二", isTrue: false, url: "2"},
                    {title: "导航三", isTrue: false, url: "3"},
                ],
                setTitle: "设置",
                flag: false,
                show: true
            };
        },
        components: {
            sidebar,
            myhead,
        },
        methods: {
            hideAside(val) {
                this.flag = val;
            }
        },
    };
</script>

<style lang="less" scoped>
    /* 整体区域 */
    .el-container {
        min-width: 1200px;
        /* 顶部区域 */
        .el-header {
            background-color: #fff;
            color: #333;
            text-align: center;
        }
        /* 侧边栏区域 */
        .el-aside {
            background-color: #4da1ff;
            color: #333;
            text-align: center;
            height: 100vh;
            transition: all .3s ease-in;
        }
        /* 内容区域 */
        .el-main {
            background-color: #E9EEF3;
            color: #333;
            text-align: center;
            height: 92vh;
            /* 二级路由渲染区域 */
            .main-view {
                width: 100%;
                height: 100%;
                border: 1px solid gainsboro;
                border-radius: 20px;
                box-sizing: border-box;
            }
            // 淡入淡出效果
            .fade-enter-active, .fade-leave-active {
                transition: opacity .2s;
            }
            .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
                opacity: 0;
            }
        }
    }
</style>
